let ls = document.querySelector('#ls')
fetch('http://chst.vip:1234/api/getgsshop')
    .then(body => body.json())
    .then(res => {
        let r = res.result;
        console.log(r);
        r.forEach(item => {

            let li = document.createElement('li')
            li.innerHTML = `${item.shopName}`
            li.setAttribute('shopId', `${item.shopId}`)
            ls.appendChild(li)
        });

    })

let ls1 = document.querySelector('#ls1')
fetch('http://chst.vip:1234/api/getgsshoparea')
    .then(body => body.json())
    .then(res => {
        let r = res.result;
        console.log(r);
        r.forEach(item => {

            let li = document.createElement('li')
            li.innerHTML = `${item.areaName}`
            li.setAttribute('areaId', `${item.areaId}`)
            ls1.appendChild(li)
        });

    })

let main = document.querySelector('#main')
fetch('http://chst.vip:1234/api/getgsproduct?shopid=0&areaid=0')
    .then(body => body.json())
    .then(res => {
        let r = res.result;
        console.log(r);
        r.forEach(item => {

            let div = document.createElement('div')
            div.innerHTML = `<img src=${item.productImg} alt="">
                                
                                <p>${item.productName}</p>
                                <p>${item.productPrice}</p>
                                
                                `

            main.appendChild(div)
        });

    })






$('#list').css('display', 'none')
$('#list1').css('display', 'none')



//点击商铺弹窗
$('#shop').click(function () {
    if ($('#list').css('display') === 'none') {
        $('#list').slideDown(200).css('display', 'block')
        $('#list1').css('display', 'none')
        $('#shop').find('span').text('▲')
    } else if ($('#list').css('display') === 'block') {
        $('#list').slideUp(200)
        $('#shop').find('span').text('▼')
    }
})

//点击地区弹窗
$('#area').click(function () {
    if ($('#list1').css('display') === 'none') {
        $('#list1').slideDown(200).css('display', 'block')
        $('#list').css('display', 'none')
        $('#area').find('span').text('▲')
    } else if ($('#list1').css('display') === 'block') {
        $('#list1').slideUp(200)
        $('#area').find('span').text('▼')
    }
})

let num = 0;
$('#ls').on('click', 'li', function () {
    $('#shop').find('span').text('▼')
    $('#list').css('display', 'none')
    console.log($(this).attr('shopid'));
    num = $(this).attr('shopid')
    $('#main').html('')
    fetch(`http://chst.vip:1234/api/getgsproduct?shopid=${num}&areaid=${num1}`)
        .then(body => body.json())
        .then(res => {
            let r = res.result;
            // console.log(r);
            r.forEach(item => {

                let div = document.createElement('div')
                div.innerHTML = `<img src=${item.productImg} alt="">
                                
                                <p>${item.productName}</p>
                                <p>${item.productPrice}</p>
                                
                                `

                main.appendChild(div)
            });

        })

})
let num1 = 0;
$('#ls1').on('click', 'li', function () {
    $('#area').find('span').text('▼')
    $('#list1').css('display', 'none')
    console.log($(this).attr('areaid'));
    num1 = $(this).attr('areaid')
    $('#main').html('')
    fetch(`http://chst.vip:1234/api/getgsproduct?shopid=${num}&areaid=${num1}`)
        .then(body => body.json())
        .then(res => {
            let r = res.result;
            // console.log(r);
            r.forEach(item => {

                let div = document.createElement('div')
                div.innerHTML = `<img src=${item.productImg} alt="">
                                
                                <p>${item.productName}</p>
                                <p>${item.productPrice}</p>
                                
                                `

                main.appendChild(div)
            });

        })

})